<section>
  <h5>与区域对齐 使用左下（右对齐下），左上（右对齐上方显示）</h5>
  <div class="btn-group g-dropdown"  dDropDown appendToBody [alignOrigin]="origin" [appendToBodyDirections]="['leftDown','leftUp']" (onToggle)="onToggle($event)">
    <div class="align-origin" #origin> 对齐区域
      <a dDropDownToggle class="devui-dropdown-default">
        下拉按钮
        <span class="icon-chevron-down"></span>
      </a>
    </div>

    <ul dDropDownMenu class="dropdown-menu devui-dropdown-menu devui-scrollbar" role="menu">
      <li class="disabled" role="menuitem">
        <a class="dropdown-item disabled">禁用选项</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item">新建</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item">删除</a>
      </li>
    </ul>
  </div>
</section>
<section>
  <h5>使用居中显示</h5>
  <div class="btn-group g-dropdown"  dDropDown appendToBody [appendToBodyDirections]="['centerDown','centerUp']" (onToggle)="onToggle($event)">
    <d-button icon="icon-add" bsStyle="text-dark" title="添加" dDropDownToggle></d-button>
    <ul dDropDownMenu class="devui-dropdown-menu" role="menu">
      <li class="disabled" role="menuitem">
        <a class="devui-dropdown-item disabled">禁用选项</a>
      </li>
      <li role="menuitem">
        <a class="devui-dropdown-item">新建内容操作</a>
      </li>
      <li role="menuitem">
        <a class="devui-dropdown-item">删除内容等等等</a>
      </li>
    </ul>
  </div>
</section>
